<template>
  <div class="aside-template">
    <div class="title">推荐</div>
    <div class="content">
      <div class="item" v-for="(item, index) of modules" :key="index" @click="onAdd(item)">
        <i class="iconfont" :class="item.icon" />
        <em>{{item.name}}</em>
      </div>
    </div>
    <div class="list">
      <div class="expect"><span>推荐模板，敬请期待</span></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { uuid } from '../../../../common/'
import { STORE_NAMESPACE, categoryConstants, typeConstants } from '../../../../config'
export default {
  name: 'AsideRecommend',
  data () {
    return {
      modules: [
        {
          name: '单列',
          icon: 'icon-dantu',
          value: typeConstants.RECOMMEND_1,
          num: 1
        },
        {
          name: '两列',
          icon: 'icon-lianglie',
          value: typeConstants.RECOMMEND_2,
          num: 2
        },
        {
          name: '三列',
          icon: 'icon-sanlie',
          value: typeConstants.RECOMMEND_3,
          num: 3
        }
      ]
    }
  },
  computed: {
    ...mapState({
      shopId: state => state[STORE_NAMESPACE].shopId
    })
  },
  methods: {
    onAdd (item) {
      const data = {
        uuid: uuid(this.shopId, categoryConstants.RECOMMEND),
        category: categoryConstants.RECOMMEND,
        type: item.value,
        isMarginBottom: true,
        elements: new Array(item.num).fill(null).map(item => ({
          uuid: '',
          name: '',
          link: '',
          url: '',
          targetType: '',
          targetParams: '',
          price: ''
        }))
      }
      this.setLayout(data)
    },
    setLayout (data) {
      this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        type: 'push',
        value: data
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>